<template>
  <div class="TodoFilter">
    <button :class="{ active: status === 0 }" @click="changeStatus(0)">全部</button>
    <button :class="{ active: status === 1 }" @click="changeStatus(1)">未完成</button>
    <button :class="{ active: status === 2 }" @click="changeStatus(2)">进行中</button>
    <button :class="{ active: status === 3 }" @click="changeStatus(3)">已完成</button>
  </div>
</template>
<script>
export default {
  props: ['status'],
  model: {
    prop: 'status',
    event: 'change-status'
  },
  methods: {
    changeStatus(status) {
      this.$emit('change-status', status);
    }
  }
};
</script>

<style>
.TodoFilter {
  .active {
    background-color: bisque;
  }
}
</style>